<template>
  <div class="aftersale-detail-container">
    <div class="header">
      <div class="back-btn" @click="onBack">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
      </div>
      <h1>售后订单详情</h1>
    </div>

    <!-- 订单基本信息 -->
    <div class="order-info-card">
      <div class="info-row">
        <span class="label">售后单号：</span>
        <span class="value">{{ orderData.afterSaleNo }}</span>
      </div>
      <div class="info-row">
        <span class="label">创建人：</span>
        <span class="value">{{ orderData.creator }}</span>
      </div>
      <div class="info-row">
        <span class="label">创建时间：</span>
        <span class="value">{{ orderData.createTime }}</span>
      </div>
      <div class="info-row">
        <span class="label">售后状态：</span>
        <span class="value status-{{ orderData.state }}">{{ orderData.state }}</span>
      </div>
      <div class="info-row">
        <span class="label">售后类型：</span>
        <span class="value">{{ orderData.type }}</span>
      </div>
      <div class="info-row">
        <span class="label">订单编号：</span>
        <span class="value">{{ orderData.orderNo }}</span>
      </div>
    </div>

    <!-- 商品信息 -->
    <div class="goods-section">
      <h2>商品信息</h2>
      <div class="goods-table">
        <div class="table-header">
          <div class="table-cell">商品名称</div>
          <div class="table-cell">SKU编码</div>
          <div class="table-cell">规格</div>
          <div class="table-cell">数量</div>
        </div>
        <div class="table-body">
          <div class="table-row" v-for="item in orderData.products" :key="item.sku">
            <div class="table-cell">{{ item.productName }}</div>
            <div class="table-cell">{{ item.sku }}</div>
            <div class="table-cell">{{ item.spec }}</div>
            <div class="table-cell">{{ item.quantity }}</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 驳回原因区域 (如果订单已驳回) -->
    <div class="reject-reason-section" v-if="orderData.state === '已驳回'">
      <h3>驳回原因</h3>
      <p>{{ orderData.rejectReason }}</p>
    </div>

    <!-- 操作按钮区域 -->
    <div class="action-buttons">
      <el-popover v-model:visible="rejectDialogVisible" placement="top" width="500px" trigger="click">
        <template #reference>
          <el-button type="danger" size="large">驳回</el-button>
        </template>
        <template #default>
          <div class="reject-dialog">
            <h3 class="dialog-title">售后订单驳回原因</h3>
            <el-form ref="rejectForm" :model="rejectFormData" label-position="top">
              <el-form-item label="驳回原因：" prop="rejectReason"
                :rules="[{ required: true, message: '请输入驳回原因', trigger: 'blur' }]">
                <el-input type="textarea" v-model="rejectFormData.rejectReason" maxlength="50"
                  show-word-limit placeholder="请输入驳回原因"></el-input>
              </el-form-item>
            </el-form>
            <div class="dialog-buttons">
              <el-button type="info" @click="closeRejectDialog">取消</el-button>
              <el-button type="primary" @click="handleReject">确认</el-button>
            </div>
          </div>
        </template>
      </el-popover>

      <el-button type="primary" size="large" @click="handleApprove">通过</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 模拟订单数据
const orderData = reactive({
  afterSaleNo: 'AS202311010001',
  creator: '张三',
  createTime: '2023-11-01 10:30:00',
  state: '待审核', // 待审核/已驳回/已通过
  type: '取消订单',
  orderNo: 'SO202311010001',
  rejectReason: '',
  products: [
    {
      productName: '智能床垫',
      sku: 'SKU001',
      spec: '1.8m*2.0m',
      quantity: 1
    },
    {
      productName: '枕头',
      sku: 'SKU002',
      spec: '标准款',
      quantity: 2
    }
  ]
})

// 驳回弹窗状态
const rejectDialogVisible = ref(false)
// 驳回表单引用
const rejectForm = ref(null)
// 驳回表单数据
const rejectFormData = reactive({
  rejectReason: ''
})

// 返回按钮事件
const onBack = () => {
  ElMessageBox.confirm('确定要返回吗？当前操作可能不会保存。', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    ElMessage({ message: '已返回', type: 'success' })
  }).catch(() => {
    // 取消返回
  })
}

// 关闭驳回弹窗
const closeRejectDialog = () => {
  rejectDialogVisible.value = false
  rejectFormData.rejectReason = ''
}

// 处理驳回操作
const handleReject = () => {
  rejectForm.value.validate(valid => {
    if (valid) {
      // 模拟API调用
      setTimeout(() => {
        orderData.state = '已驳回'
        orderData.rejectReason = rejectFormData.rejectReason
        closeRejectDialog()
        ElMessage({ message: '驳回成功', type: 'success' })
      }, 500)
    }
  })
}

// 处理通过操作
const handleApprove = () => {
  ElMessageBox.confirm('确定要通过此售后申请吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    // 模拟API调用
    setTimeout(() => {
      orderData.state = '已通过'
      ElMessage({ message: '审核通过', type: 'success' })
    }, 500)
  }).catch(() => {
    // 取消通过
  })
}
</script>

<style scoped>
.aftersale-detail-container {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.header {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e8e8e8;
}

.back-btn {
  cursor: pointer;
  margin-right: 15px;
  color: #606266;
}

h1 {
  font-size: 24px;
  font-weight: 600;
  color: #303133;
}

.order-info-card {
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 30px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
}

.info-row {
  display: flex;
  margin-bottom: 15px;
}

.label {
  width: 120px;
  color: #909399;
}

.value {
  flex: 1;
  color: #303133;
}

.status-待审核 {
  color: #e6a23c;
}

.status-已驳回 {
  color: #f56c6c;
}

.status-已通过 {
  color: #67c23a;
}

.goods-section {
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 30px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
}

h2 {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e8e8e8;
}

.goods-table {
  width: 100%;
  border-collapse: collapse;
}

.table-header {
  display: flex;
  background-color: #f5f7fa;
  font-weight: 600;
}

.table-cell {
  flex: 1;
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #e8e8e8;
}

.table-row {
  display: flex;
}

.table-row:hover {
  background-color: #f5f7fa;
}

.reject-reason-section {
  background-color: #fff1f0;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 30px;
  border-left: 4px solid #f56c6c;
}

h3 {
  font-size: 16px;
  font-weight: 600;
  color: #f56c6c;
  margin-bottom: 10px;
}

.reject-reason-section p {
  color: #f56c6c;
  margin: 0;
}

.action-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 15px;
  margin-top: 30px;
}

.reject-dialog {
  padding: 20px;
}

.dialog-title {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 16px;
}

.dialog-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 24px;
}
</style>